<script setup lang="ts">
import { useAssistStore } from '@/store/modules/Assist/useAssistStore';
import { storeToRefs } from 'pinia';
import pressureLine from '@/components/ECharts/pressureLine/index.vue';
import { getMonitor } from '@/api/Assist';
import { getPointInfo } from '@/api/earlyWarning';

const { dataMonitoringResource } = storeToRefs(useAssistStore());
const eChartsData = ref<any>(null);
const defaultProps = {
  label: 'label',
  children: 'children'
};

const expandedKeys = ref<string[]>([]);
const isMonitor = ref<boolean>(true);
const handleNodeClick = (val: any) => {
  if (!val.children) {
    if (val.type === '设备') {
      getEquipmentOperationManual(val.id);
    } else {
      getMonitorHandler(val.code);
    }
  }
};

//获取站点数据
const getMonitorHandler = async (code) => {
  const res = await getMonitor(code);
  if (res.code == 200) {
    eChartsData.value = res.data;
    isMonitor.value = true;
  }
};
//获取设备运行数据
const getEquipmentOperationManual = async (id) => {
  const params = {
    id,
    type: 'MONITOR'
  };
  getPointInfo(params).then((res) => {
    eChartsData.value = res.data.data;
    isMonitor.value = false;
  });
};
watch(
  () => dataMonitoringResource.value,
  (value) => {
    if (value[0]?.children) {
      getMonitorHandler(value[0].children[0].code);
    }
  },
  { immediate: true }
);
</script>

<template>
  <div class="data-monitoring-container">
    <div class="tree-navigation">
      <el-scrollbar class="tree-scrollbar">
        <el-tree
          :data="dataMonitoringResource"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :highlight-current="true"
          :default-expanded-keys="expandedKeys"
          node-key="id"
          class="custom-tree"
        >
          <template #default="{ node, data }">
            <span class="tree-node-label">
              <span class="label-text">{{ node.label }}</span>
              <span v-if="data.count" class="node-count">({{ data.count }})</span>
            </span>
          </template>
        </el-tree>
      </el-scrollbar>
    </div>

    <div class="chart-container" v-if="eChartsData">
      <pressureLine :echarts-data="eChartsData" v-if="isMonitor"></pressureLine>
      <run-data :echarts-data="eChartsData" v-else></run-data>
    </div>
    <div class="empty-box" v-else>暂无数据</div>
  </div>
</template>

<style scoped lang="scss">
.data-monitoring-container {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 1rem;

  .tree-navigation {
    width: 40%;
    height: 100%;
  }

  .chart-container,
  .empty-box {
    width: 60%;
    height: 100%;
    background: rgba(0, 64, 104, 0.6);
    box-shadow: inset 0 0 1.5625rem 0 #1b5bfb;
  }

  .empty-box {
    color: #0be4f1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.tree-scrollbar {
  flex: 1;

  :deep(.el-scrollbar__view) {
    height: 100%;
  }

  :deep(.el-scrollbar__bar) {
    &.is-vertical {
      width: 6px;
    }

    .el-scrollbar__thumb {
      background-color: rgba(0, 255, 255, 0.5);

      &:hover {
        background-color: rgba(0, 255, 255, 0.8);
      }
    }
  }
}

.custom-tree {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  color: #fff;
  padding: 0.625rem;
  box-sizing: border-box;
  background-color: rgba(0, 64, 104, 0.6);
  border: 1px solid #045bbd;
  box-shadow: inset 0 0 1.5625rem 0 #1b5bfb;

  :deep(.el-tree-node) {
    width: 100%;
    margin-bottom: 0.5rem;

    > .el-tree-node__content {
      height: 2.5rem;
      transition: all 0.3s ease;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background-color: transparent !important; // 默认透明

      .tree-node-label {
        display: flex;
        align-items: center;

        .label-text {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .node-count {
          font-size: 0.8rem;
          color: rgba(255, 255, 255, 0.6);
          margin-left: 0.5rem;
          flex-shrink: 0;
        }
      }
    }

    .el-tree-node__expand-icon {
      color: #02b3be;
      font-size: 1.3125rem;
      transition: transform 0.3s ease;
      flex-shrink: 0;

      &.expanded {
        transform: rotate(90deg);
      }

      &.is-leaf {
        visibility: hidden;
      }
    }

    // 修改悬停状态
    > .el-tree-node__content:hover {
      background-color: rgba(0, 255, 255, 0.1) !important; // 半透明青色
    }

    // 修改选中状态
    &.is-current {
      > .el-tree-node__content {
        background-color: rgba(0, 150, 255, 0.2) !important; // 半透明蓝色
      }
    }
  }

  // 修改高亮颜色（聚焦状态）
  :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
    background-color: rgba(0, 150, 255, 0.2) !important;
  }
}
</style>
